export default {
    mounted(el, binding) {
        el.addEventListener('mousedown', start)
        const ctx = el.getContext('2d')
        ctx.lineCap = 'round'
        ctx.lineJoin = 'round'
        let prev = {offsetX: 0, offsetY: 0}

        function start(e) {
            ctx.beginPath()
            prev.offsetX = e.offsetX
            prev.offsetY = e.offsetY

            console.log(prev)

            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', end)

            ctx.moveTo(prev.offsetX * 2, prev.offsetY * 2)
            e.stopPropagation()
        }

        function move(e) {
            // ctx.moveTo(prev.offsetX, prev.offsetY)
            ctx.lineTo(e.offsetX * 2, e.offsetY * 2)
            ctx.lineWidth = el.getAttribute('color') === 'rgb(255, 255, 255)' ? 30 : 14
            ctx.strokeStyle = el.getAttribute('color')
            console.log(el.getAttribute('color'))
            ctx.stroke()
            e.stopPropagation()
        }

        function end(e) {
            ctx.lineWidth = el.getAttribute('color') === 'rgb(255, 255, 255)' ? 30 : 14
            ctx.strokeStyle = el.getAttribute('color')
            
            ctx.stroke()
            e.stopPropagation()
            document.removeEventListener('mousemove', move)
            document.removeEventListener('mouseup', end)
        }
    }
}